<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- Flex 是 Flexible Box 的缩写，意为"弹性布局"。
     给盒子设置为display:flex,此盒子就是一个Flex容器，里面的每个子元素都是flex项目
     弹性盒子：默认主轴（x轴）、交叉轴（y轴）；start、center、end -->
    <style>
        .box {
            width: 500px;
            height: 300px;
            border: 1px solid pink;
            margin: 50px auto;
            /* Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
            默认是主轴（x轴）的start（从左往右） */
            display: flex;

            /* flex-direction属性决定主轴的方向（即项目的排列方向）;
            1、row:主轴（从左往右）；
            2、row-reverse：主轴（从右往左）；
            3、column：交叉轴（从上往下）；
            4、column-reverse：交叉轴（从下往上）；*/
            flex-direction: row;

            /* justify-content属性定义了项目在主轴上的对齐方式 ；
               justify-content: flex-start（x轴左对齐）| 
                               flex-end（x轴右对齐）  |
                               center （x轴居中对齐）|
                               space-between （两端对齐）|
                               space-around （居中分散1:2:1）| */
            justify-content: space-between;

            /* align-items属性定义项目在交叉轴上如何对齐；
               align-items: flex-start （y轴左对齐)|
                            flex-end （y轴右对齐）|
                            center  （y轴居中对齐）|
                            baseline (文本线对齐)|
                            stretch; */
            align-items: center;

            /* 默认情况下，如果项目比较多，都会排在一条线上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
            flex-wrap: nowrap （默认不换行）|
                       wrap （换行，第一行在上方）|
                       wrap-reverse （换行，第一行在下方）|*/
        }

        .item {
            width: 80px;
            height: 80px;
            font-size: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .item1 {
            background-color: rgb(255, 70, 70);
        }

        .item1:hover {
            background-color: pink;
            cursor: pointer;
        }

        .item2 {
            background-color: green;
            animation: text 2s infinite;
        }

        @keyframes text {
            0% {
                top: 0;
                transform: scale(1);
            }

            50% {
                top: 30px;
                transform: scale(0.1);
            }

            100% {
                top: 0;
                transform: scale(2);
            }
        }

        .item3 {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
    </div>
</body>

</html>